<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" :needRight="true" :hasFixedFlag="hasFixedFlag" :conCol="conCol" bgColor="usuallyBg">
			<template v-slot:tab v-if="showTabNavFalg">
				<sq-tit-tab-nav
					:typeTabNav="tabNav"
					:typeTabIndex="tabIndex"
					@switchTypeTab="switchTabNav"
				>
					<template v-slot:rightBar>
						<view class="bbsSearch flexAll" @tap="goSearch">
							<text class="iconfont icon-sq-search"></text>
						</view>
					</template> 
				</sq-tit-tab-nav>
			</template>
			<template v-slot:right v-if="!showTabNavFalg">
				<custom-right-nav-bar
					:conCol="conCol"
					@handleTap="goSearch"
				>
					<template v-slot:rightBarCon>
						<text class="iconfont icon-sq-search"></text>
					</template>
				</custom-right-nav-bar>
			</template>
		</custom-nav-sq-xcx>
		<view class="bbsImg posRel">
			<image class="samePar posAbso ltzero" :src="getStaticFilePath('bbsBg.png')"></image>
			<view class="bbsHead samePar posAbso ltzero">
				<view class="bbsTit">
					<view class="welcome">欢迎来到</view>
					<view>社区生活论坛</view>
				</view>
				<view class="bbsTag clearfix">
					<view class="bbsTagItem"
						:class="[bbsTagIndex == index ? 'active' : '']"
						v-for="(item,index) in bbsTag"
						:key="index"
						@tap="switchBbsTag(index,item)"
					>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="sqBbsTabNav" :style="{top:navHeight + 'px'}" v-if="hasFixedFlag">
			<view class="innerBbsTabNav">
				<swiper-tab :tab-list="bbsTag" :tabClass="courseListCls" currSys="sqSysBbs" :tabIndex.sync="bbsTagIndex" @change="tabChange"></swiper-tab>
			</view>
		</view>
		<view class="bbsTabNav hasFlex padd">
			<view class="bbsTabItem"
				:class="[tabIndex == index ? 'active' : '']"
				v-for="(item,index) in tabNav"
				:key="index"
				@tap="switchTabNav(index,item)"
			>{{item.name}}</view>
		</view> 
		<view class="padd">
			<sq-bbs-list></sq-bbs-list>
			<!-- <view class="blockNoData">
				<image class="noSqDataImg" :src="getStaticFilePath('noSqData.png')"></image>
				<view>暂无记录</view>
			</view> -->
		</view>
		<image class="pubBbs" :src="getStaticFilePath('pubBbs.png')" @tap="goPubBbs"></image>
	</view>
</template>

<script>
	import SqTitTabNav from '../../subSqMine/components/SqTitTabNav'
	import CustomRightNavBar from '@/components/custom-right-nav-bar'
	import SwiperTab from '@/components/swiper-tab/swiper-tab'
	import SqBbsList from './components/SqBbbsList'
	export default {
		components:{
			SqTitTabNav,
			CustomRightNavBar,
			SwiperTab,
			SqBbsList
		},
		data(){
			return{
				bbsTag:[
					{name:'置换'},
					{name:'出/租房'},
					{name:'咨询'},
					{name:'城事'},
					{name:'家政'},
					{name:'失物招领'},
					{name:'其他'}
				],
				bbsTagIndex:0,
				courseListCls:'courseListTab',
				tabNav:[
					{name:'全部',id:0},
					{name:'关注',id:1}
				],
				tabIndex:0,
				tabNavId:0,
				hasFixedFlag:false,
				courseTop:0,
				showTabNavFalg:false,
				conCol:'#000',
				navHeight:getApp().globalData.navHeight,
				// statusBarHei:getApp().globalData.statusBarHeight,
				// menuBarLeft:getApp().globalData.menuBarLeft,
				// navigationBarHeight:getApp().globalData.navigationBarHeight
			}
		},
		onLoad(){
			uni.createSelectorQuery().select('.bbsTabNav').boundingClientRect(data => {
				this.courseTop = data.top;
			}).exec()
		},
		onPageScroll: function(e) {
			const { scrollTop } = e;
			if(scrollTop >= this.navHeight){
				this.hasFixedFlag = true;
				this.conCol = '#fff';
				if(scrollTop >= (this.courseTop-this.navHeight)){
					this.showTabNavFalg = true;
				}
			}else{
				this.hasFixedFlag = false;
				this.showTabNavFalg = false;
				this.conCol = '#000';
			}
		},
		methods:{
			switchBbsTag(index,item){
				this.bbsTagIndex = index;
				
			},
			switchTabNav(index,item){
				this.tabIndex = index;
				this.tabNavId = item.id;
				console.log(this.tabIndex)
			},
			goSearch(){
				uni.navigateTo({
					url:'/pages/subSqIndex/search/search?searchType=sqBbs'
				})
			},
			goPubBbs(){
				uni.navigateTo({
					url:'/pages/subSqIndex/sqBbs/pubBbs'
				})
			},
			tabChange(index){
				this.bbsTagIndex = index;
				//this.resType = this.tabList[index].id;
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $sq-fuf;
	}
</style>
<style lang="scss" scoped>
	.sqBbsTabNav{
		width: 100%;
		height: 100rpx;
		background: $pss-sq-main-bg;
		position: fixed;
		left: 0;
		z-index: 10;
		.innerBbsTabNav{
			height: 100%;
			border-radius: 30rpx 30rpx 0 0;
			background: $sq-fuf;
		}
	}
	.bbsImg{
		width: 100%;
		height: 618rpx;
		.bbsTit{
			font-size: 40rpx;
			color: $sq-main0;
			font-weight: 600;
			position: absolute;
			left: 30rpx;
			bottom: 320rpx;
			.welcome{
				margin-bottom: 10rpx;
			}
		}
		.bbsHead{
			z-index: 2;
			.bbsTag{
				position: absolute;
				bottom: 120rpx;
				left: 30rpx;
				right: 30rpx;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-auto-flow: row;
				grid-gap: 20rpx;
				.bbsTagItem{
					width: 140rpx;
					height: 70rpx;
					line-height: 70rpx;
					background: $sq-fue;
					color: #fff;
					text-align: center;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: $sq-main8;
					&.active{
						background: $pss-sq-main;
						color: #fff;
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
	.bbsTabNav{
		height: 90rpx;
		margin-top: -110rpx;
		position: relative;
		z-index: 2;
		.bbsTabItem{
			width: 120rpx;
			line-height: 90rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			color: $sq-main8;
			&.active{
				font-weight: 600;
				color: $sq-main0;
				font-size: 32rpx;
			}
		}
	}
	.icon-sq-search{
		font-size: 46rpx;
	}
	.bbsSearch{
		width: 50px;
		color: #fff;
	}
	.blockNoData{
		font-size: 28rpx;
		color:$sq-main0;
		text-align: center;
		padding: 100rpx 0;
		.noSqDataImg{
			width: 300rpx;
			height: 300rpx;
		}
	}
	.pubBbs{
		width: 120rpx;
		height: 120rpx;
		position: fixed;
		right: 30rpx;
		bottom: 60rpx;
		z-index: 9;
	}
</style>